
import React, { Component } from "react";
import './cards.css'
import { Card, Avatar } from 'antd';
import {
  BarChartOutlined,
  CaretUpOutlined,
  CaretDownOutlined,
  MessageTwoTone
} from '@ant-design/icons';

const { Meta } = Card;
export default class extends Component {
  constructor(props) {
    super(props);
    this.state = {
      title:''
    };
  }

  componentDidMount() {

  }

  getContent = () =>{
    const { card } =  this.props;
    
    if(card.refType === 'dom'){
      return (<p className='cardContent'>
          <span>{card.contentData.week}</span>
          {card.contentData.weekFlag === 'up' ? <span style={{color:'red'}}><CaretUpOutlined /></span> : <span style={{color:'green'}}><CaretDownOutlined /></span> } {card.contentData.weekData}%
          &nbsp;&nbsp;&nbsp;&nbsp;
          <span>{card.contentData.month}</span>
          {card.contentData.monthFlag === 'up' ? <span style={{color:'red'}}><CaretUpOutlined /></span> : <span style={{color:'green'}}><CaretDownOutlined /></span> } {card.contentData.monthData}%
    </p>)
    }else if(card.refType === 'chart'){
      return (<span>表格</span>)
    }else{
      return (<span>其他</span>)
    }
  }

  render() {
    const { card } = this.props;
    const { title } = this.state;
    return (
      <>
        <div className="cardBox">
          <Card title={title} 
              cover={
                <div>
                    <p className='clearfix cardTop'>
                      <span className='titleText' >{card.topData.title}</span>
                      <span className='titleTextIcon'><BarChartOutlined twoToneColor="#eb2f96" /></span>
                    </p>
                    <p className='money'>
                      <span>{card.topData.icon}</span>
                      <span>{card.topData.count} </span>
                      <span>{card.topData.unit}</span>
                    </p>                    
                </div>
              }

              actions={[
                <p className='cardBottom'>
                  <span>{card.bottomData.title}</span>
                  &nbsp;&nbsp;&nbsp;
                  <span>{card.bottomData.count}</span>
                  <span>{card.bottomData.unit}</span>
              </p>
              ]}              
            >
              <div className='cardContent'>
                  {this.getContent()}
              </div>
          </Card>            
        </div>
      </>
    )
    }
}
